/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { useEffect, useRef, useState } from 'react';
import { message, Divider, List, Button } from 'antd';
import { ModalForm, ProFormTextArea } from '@ant-design/pro-form';
import type { TableListItem } from '../../index.d';
import type { ProFormInstance } from '@ant-design/pro-form';
import { getRemarkList, updateInnRemark } from '@/services/yz/manage';

interface KbCollectionModal {
  item: TableListItem;
  visible: boolean;
  setVisible: Function | any;
}

const Index = ({ visible, item, setVisible }: KbCollectionModal) => {
  const formRef = useRef<ProFormInstance>();
  const { dak_id: dakId, dak_name: inn_name } = item;
  const [data, setData] = useState<any[]>([]);
  const getList = async () => {
    const { code, data: remarkList, msg } = await getRemarkList({ cm_id: dakId });
    if (code == 0) {
      setData(remarkList.reverse());
    } else {
      message.error(msg);
    }
  };

  const onSubmit = async (value: { remark: string }) => {
    const { remark = '' } = value;
    updateInnRemark({ dakId, inn_name, remark }).then((res) => {
      const { code, msg } = res;
      if (code === 0) {
        getList();
        formRef.current?.resetFields();
        message.success(msg);
      } else {
        message.error(msg);
      }
    });
  };

  useEffect(() => {
    if (visible) {
      getList();
    }
  }, [visible]);

  return (
    <ModalForm
      formRef={formRef}
      title='历史记录'
      visible={visible}
      onFinish={onSubmit}
      onVisibleChange={setVisible}
      submitter={{
        render: ({ form }) => (
          <Button type='primary' onClick={() => form?.submit()}>
            保存
          </Button>
        ),
      }}
      modalProps={{
        bodyStyle: { padding: 0, height: 500 },
        centered: true,
      }}
    >
      <div
        id='scrollableDiv'
        style={{
          height: 400,
          overflow: 'auto',
          padding: '0 16px',
          border: '1px solid rgba(140, 140, 140, 0.35)',
        }}
      >
        <List
          header={<h3>{inn_name}</h3>}
          dataSource={data}
          itemLayout='horizontal'
          renderItem={(ite) => (
            <List.Item key={ite.email}>
              <List.Item.Meta
                title={<a>{ite.remark}</a>}
                description={ite.user_name + ' - ' + ite.created_at}
              />
              <div>{ite.inn_name || '-'}</div>
            </List.Item>
          )}
        />
        <Divider plain>没有更多了 🤐</Divider>
      </div>
      <ProFormTextArea
        name='remark'
        placeholder='请输入备注内容'
        allowClear
        rules={[{ required: true, message: '请输入备注内容' }]}
        fieldProps={{
          rows: 4,
          maxLength: 300,
        }}
      />
    </ModalForm>
  );
};

export default Index;
